<template>
  <div id="discount-card">
    <!-- 卡片左侧内容区域 -->
    <div class="discount-left">
      <!-- 内容左侧图片部分 -->
      <div class="l-image">
        <img
          :src="
            status === 1
              ? show_url + cardDetail.images[0]
              : show_url + cardDetail.icon
          "
        />
      </div>

      <!-- 内容右侧描述部分 -->
      <div class="l-content">
        <p class="l-c-title">
          {{ status === 1 ? cardDetail.goods_name : cardDetail.name }}
        </p>
        <p class="l-c-desc">
          {{
            status === 1
              ? descSubstring(cardDetail.goods_desc)
              : cardDetail.desc
          }}
        </p>
        <p class="l-c-time" v-if="cardDetail.expire_date">
          {{ cardDetail.expire_date }} {{ status === 2 ? "到期" : undefined }}
        </p>
        <p class="l-c-price">
          <template v-if="cardDetail.price && cardDetail.price !== 0">
            <span class="price-yang">¥</span>
            <span class="price-yuan">{{ cardDetail.price }}</span>
          </template>
          <template v-else>
            <span class="no-price">--</span>
          </template>
        </p>
      </div>
    </div>

    <!-- 卡片右侧兑换区域 -->
    <div class="discount-right">
      <button
        :disabled="status !== 1"
        :class="[{ 'btn-dont': status !== 1 }, { 'have-not': status === 2 }]"
        @click="exchangeClick(cardDetail.id)"
      >
        {{ btnContent }}
      </button>
    </div>
  </div>
</template>

<script>
import { escapeHTML } from "@/utils";

export default {
  name: "DiscountCard",
  props: ["cardDetail", "status", "show_url"],
  computed: {
    btnContent() {
      let btnShow = "兑换";
      switch (this.status) {
        case 2:
          btnShow = "未使用";
          break;
        case 3:
          btnShow = "已使用";
          break;
        case 4:
          btnShow = "已过期";
          break;
        default:
          break;
      }
      return btnShow;
    },
  },
  methods: {
    // 触发兑换按钮
    exchangeClick(id) {
      this.$emit("handleExchangeClick", id);
    },

    // 过滤描述文字
    descSubstring(desc) {
      let res = escapeHTML(desc);
      let result = "";
      if (res.length > 30) {
        result = res.substring(0, 30) + "...";
        return result;
      } else {
        return res;
      }
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
#discount-card {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 120px;
  background: #1e2020;
  padding: 0 20px;
  margin-bottom: 15px;
  border-radius: 12px;

  // > 卡片左侧内容区域
  .discount-left {
    display: flex;

    // - 内容左侧图片部分
    .l-image {
      font-size: 0;
      margin-top: 15px;

      img {
        width: 90px;
        height: 90px;
      }
    }

    // - 内容右侧描述部分
    .l-content {
      position: relative;
      height: 90px;
      margin-left: 20px;
      margin-top: 15px;

      .l-c-title {
        max-width: 350px;
        // height: 36px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 14px;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
      }
      .l-c-desc {
        max-width: 350px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        // line-height: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 10px;
      }
      .l-c-time {
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        // margin-top: 2px;
      }
      .l-c-price {
        position: absolute;
        bottom: 0;
        left: 0;

        span {
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #00ffb0;
          // line-height: 14px;
        }
        .price-yang {
          font-size: 12px;
        }
        .price-yuan {
          font-size: 18px;
          margin-left: 3px;
        }
        .no-price {
          font-size: 18px;
          color: #999999;
        }
      }
    }
  }

  // > 卡片右侧兑换区域
  .discount-right {
    align-self: center;

    button {
      width: 100px;
      height: 35px;
      background: none;
      border: 1px solid #999999;
      backdrop-filter: blur(3px);
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #00ffb0;
      line-height: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 1px solid #00ffb0;
      opacity: 0.8;
    }
    button:hover {
      box-shadow: 0 0 5px 0 #00ffb0;
      opacity: 1;
    }
    button:active {
      box-shadow: none;
      color: #999999;
      border: 1px solid #999999;
    }
  }

  // > public style
  .btn-dont {
    opacity: 0.8 !important;
    box-shadow: none !important;
    color: #999999 !important;
    border: 1px solid #999999 !important;
  }
  .btn-dont.have-not {
    opacity: 0.5 !important;
    box-shadow: none !important;
    color: #00ffb0 !important;
    border: 1px solid #00ffb0 !important;
  }
}
</style>
